<template>
  <div class="w-100 h-100">
    <el-table :data="tableData" style="width: 100%" stripe>
      <el-table-column prop="stationId" label="所属站点" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.device.regionId && stationName(scope.row.device.regionId) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="deviceName" label="设备名称" align="center">
      </el-table-column>
      <el-table-column prop="deviceId" label="设备编码" align="center">
      </el-table-column>
      <el-table-column prop="afsType" label="光配机类型" align="center">
        <template slot-scope="scope">
          <span>{{ $utils.handleAfsType({
                  afsType: scope.row.afsType,
                  model: scope.row.device.model
                }, 'MODEL') }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="device.model" label="设备型号" align="center">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <template>
            <!-- 查看 -->
            <el-button type="text" size="mini" icon="el-icon-view"
              >查看</el-button
            >
            <!-- 操作集 -->
            <el-dropdown
              class="el-button el-button--text"
              trigger="click"
              style="font-size: 12px"
            >
              <span class="el-dropdown-link">
                操作集<i class="el-icon-arrow-down el-icon--right" />
              </span>
              <el-dropdown-menu slot="dropdown" class="el-select-dropdown">
                <el-dropdown-item>
                  <!-- 移纤-nolang -->
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-edit"
                    class="w-100 text-left"
                    @click="fiberClick(scope.row.deviceId)"
                    >移纤</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <!-- otdr测试-nolang -->
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-document-checked"
                    class="w-100 text-left"
                    @click="dialogVisible = !dialogVisible"
                    >OTDR测试</el-button
                  >
                </el-dropdown-item>
                <el-dropdown-item>
                  <!-- 插拔纤-nolang -->
                  <el-button
                    type="text"
                    size="mini"
                    icon="el-icon-document-checked"
                    class="w-100 text-left"
                    @click="dialogVisible = !dialogVisible"
                    >插拔纤</el-button
                  >
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-el-drag-dialog
      title="移纤"
      :visible="dialogVisible"
      append-to-body
      custom-class="firber-dialog"
      @close="close"
    >
      <AfsPorts ref="AfsPorts" v-if="dialogVisible" :deviceInfo="deviceInfo" @change="portChange" />
      <div slot="footer" class="flex justify-between align-center">
        <div class="flex text-success">
          <div v-if="selectedPortList.length && selectedPortList[0]">
            <span
              >端口：{{
                portIdKey[
                  selectedPortList[0].selected
                    ? selectedPortList[0].portId
                    : selectedPortList[0].connPortId
                ].name
              }}</span
            >&nbsp;
          </div>
          <div v-if="selectedPortList.length && selectedPortList[1]">
            <i
              v-if="selectedPortList.length && selectedPortList[0]"
              class="el-icon-connection"
            />&nbsp;
            <span
              >端口：{{
                portIdKey[
                  selectedPortList[1].conn_selected
                    ? selectedPortList[1].connPortId
                    : selectedPortList[1].portId
                ].name
              }}</span
            >&nbsp;
          </div>
        </div>
        <div>
          <el-button @click="close">取消</el-button>
          <el-button @click="refresh(0)">刷新</el-button>
          <el-button
            v-if="selectedPortList[0] && selectedPortList[1]"
            type="primary"
            @click="connClick"
            >连接</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import { deepClone } from '@/utils/common'
import { getParentsById } from "@/utils/common"
import deviceInfo from "./data.js"
import deviceList from './device.js'
import AfsPorts from '@/components/device-port/AfsPorts.vue'
export default {
  components: { AfsPorts },
  data() {
    return {
      deviceInfo: {},
      tableData: deviceList,
      activeName: "first",
      selectedPortList: [], // 已选中的端口，最多出现两个（一对）
      dialogVisible: false,
      deviceId: ''
    };
  },
  computed: {
      portIdKey() {
        return this.$refs.AfsPorts.portIdKey
      },
      ...mapGetters(['regionTree']),
    },
  methods: {
    fiberClick(deviceId) {
      console.log(deviceInfo, deviceId)
      this.deviceId = deviceId
      this.dialogVisible = !this.dialogVisible
      this.deviceInfo = deviceInfo.find(i => i.deviceId === deviceId) || {}
    },
    portChange(data) {
      this.selectedPortList = data;
      this.$forceUpdate();
    },
    close() {
      this.dialogVisible = false
      this.deviceInfo = {}
    },
    refresh(time = 3000) {
      // C型和D型端口关系更新不及时，这里需要延时查询
      const timer = setTimeout(() => {
        this.deviceInfo = deviceInfo.find(i => i.deviceId === this.deviceId)
        this.$refs.AfsPorts.getAfsAllports();
        timer && clearTimeout(timer);
      }, time);
      this.selectedPortList = [];
    },
    // 建立连接click
    connClick() {
      if (
        (this.selectedPortList[0].portId &&
          this.selectedPortList[0].portId ===
            this.selectedPortList[1].portId) ||
        (this.selectedPortList[1].connPortId &&
          this.selectedPortList[1].connPortId ===
            this.selectedPortList[0].connPortId)
      ) {
        this.$message.error('已建立连接，不需要移纤');
        return;
      }
      const portId = this.selectedPortList[0].selected
        ? this.selectedPortList[0].portId
        : this.selectedPortList[0].connPortId;
      const connPortId = this.selectedPortList[1].conn_selected
        ? this.selectedPortList[1].connPortId
        : this.selectedPortList[1].portId;
      if (portId === connPortId) {
        this.$message.error('端口不能选择同一个');
        return;
      }
      if (
        this.selectedPortList[0].portId ===
          this.selectedPortList[1].connPortId ||
        this.selectedPortList[1].connPortId === this.selectedPortList[0].portId
      ) {
        this.$message.error('已建立连接，不需要移纤');
        return;
      }
      let port = {};
      if (
        this.portIdKey[portId].status === "OCCUPY" ||
        this.portIdKey[portId].status === "MAIN"
      ) {
        port = this.portIdKey[portId];
      } else if (
        this.portIdKey[connPortId].status === "OCCUPY" ||
        this.portIdKey[connPortId].status === "MAIN"
      ) {
        port = this.portIdKey[connPortId];
      }
      console.log(portId, connPortId)
    },
    stationName(stationId) {
      const list = getParentsById(this.regionTree, stationId, 'regionId')
      return list && list.reverse().map(i => i.regionName).join('/')
    }
  },
};
</script>
